<template>
  <div>
    <!-- <el-button size="mini" type="text" @click="gotoRouteHandle">返回</el-button> -->
    <div class="mod-detail" v-if="!isDataEdit">
      <!-- 头部 -->
      <div class="mod-isisis">
        <div class="hander-s">
          <div class="in-t">
            <div class="in-ts"></div>
            <h3 class="zhengshuxiangqing">
              <span>证书详情 - </span> {{ getOpSign }}
            </h3>
          </div>
          <div class="anniu">
            <el-button
              type="text"
              style="color: #6e92e9"
              @click="gotoRouteHandle"
              >返回上级</el-button
            >
          </div>
        </div>
        <!-- 基础信息 -->
        <div class="form-div">
          <el-form
            :model="dataForm"
            :label-position="labelPosition"
            ref="dataForm"
            class="queryFormList"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="姓名：">
                  {{ dataForm.certificateInfo.name }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="员工状态：">
                  <span v-if="dataForm.certificateInfo.onCompanyFlag === 1">
                    在职
                  </span>
                  <span v-if="dataForm.certificateInfo.onCompanyFlag === 0">
                    离职
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="身份证号：">
                  {{ dataForm.certificateInfo.idCard }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手机号：">
                  {{ dataForm.certificateInfo.mobile }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学历：">
                  {{ dataForm.certificateInfo.academic }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证书类型：">
                  <!-- dataForm.certificateInfo.pIdType -->
                  <span
                    v-if="
                      dataForm.certificateInfo.pIdType ===
                      'conf_certificate_type_zc'
                    "
                  >
                    注册人员
                  </span>
                  <span
                    v-if="
                      dataForm.certificateInfo.pIdType ===
                      'conf_certificate_type_zcr'
                    "
                  >
                    职称人员
                  </span>
                  <span
                    v-if="
                      dataForm.certificateInfo.pIdType ===
                      'conf_certificate_type_sl'
                    "
                  >
                    三类人员
                  </span>
                  <span
                    v-if="
                      dataForm.certificateInfo.pIdType ===
                      'conf_certificate_type_xc'
                    "
                  >
                    现场岗位人员
                  </span>
                  <span
                    v-if="
                      dataForm.certificateInfo.pIdType ===
                      'conf_certificate_type_js'
                    "
                  >
                    技术人员
                  </span>
                  <span
                    v-if="
                      dataForm.certificateInfo.pIdType ===
                      'conf_certificate_type_tz'
                    "
                  >
                    特种作业人员 </span
                  ><span
                    v-if="
                      dataForm.certificateInfo.pIdType ===
                      'conf_certificate_type_qt'
                    "
                  >
                    其他证书类型
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证书专业：">
                  {{ dataForm.certificateInfo.profession }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证书是否注册：">
                  <!-- {{dataForm.certificateInfo.registerType}} -->
                  <span v-if="dataForm.certificateInfo.registerType === 1">
                    是
                  </span>
                  <span v-if="dataForm.certificateInfo.registerType === 0">
                    否
                  </span>
                  <span v-if="dataForm.certificateInfo.registerType === 2">
                    非注册类证书
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="证书编号：">
                  {{ dataForm.certificateInfo.certificateNo }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发证日期：">
                  {{ dataForm.certificateInfo.releaseTime }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="到期日期：">
                  {{ dataForm.certificateInfo.validityEndTime }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证书状态：">
                  <!-- {{dataForm.certificateInfo.status}} -->
                  <span v-if="dataForm.certificateInfo.status === 1">
                    挂出
                  </span>
                  <span v-if="dataForm.certificateInfo.status === 0">
                    空闲
                  </span>
                  <span v-if="dataForm.certificateInfo.status === 21">
                    投标
                  </span>
                  <span v-if="dataForm.certificateInfo.status === 22">
                    项目
                  </span>
                  <span v-if="dataForm.certificateInfo.status === 23">
                    中标
                  </span>
                  <span v-if="dataForm.certificateInfo.status === 24">
                    其他
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="保管部门：">
                  {{ dataForm.certificateInfo.keepDeptName }} /
                  {{ dataForm.certificateInfo.keepUserName }}
                </el-form-item>
              </el-col>
              <el-col v-if="this.visId.certificateType === 2" :span="6">
                <el-form-item label="挂靠日期：">
                  {{ dataForm.certificateInfo.borrowTime }}
                </el-form-item>
              </el-col>
              <el-col v-if="this.visId.certificateType === 2" :span="6">
                <el-form-item label="结束日期：">
                  {{ dataForm.certificateInfo.borrowEndTime }}
                </el-form-item>
              </el-col>
              <el-col v-if="this.visId.certificateType === 2" :span="6">
                <el-form-item label="来源企业：">
                  {{ dataForm.certificateInfo.borrowOrgName }}
                </el-form-item>
              </el-col>
              <el-col
                v-if="
                  this.visId.certificateType === 1 ||
                  this.visId.certificateType === 3
                "
                :span="6"
              >
                <el-form-item label="考试日期：">
                  {{ dataForm.certificateInfo.examTime }}
                </el-form-item>
              </el-col>
              <el-col
                v-if="
                  this.visId.certificateType === 1 ||
                  this.visId.certificateType === 3
                "
                :span="6"
              >
                <el-form-item label="考试地点：">
                  {{ dataForm.certificateInfo.examLocation }}
                </el-form-item>
              </el-col>
              <el-col
                v-if="
                  this.visId.certificateType === 1 ||
                  this.visId.certificateType === 3
                "
                :span="6"
              >
                <el-form-item label="考试分数：">
                  {{ dataForm.certificateInfo.examGrade }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item
                  v-if="this.visId.certificateType === 2"
                  label="来源联系人："
                >
                  {{ dataForm.certificateInfo.borrowContact }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  v-if="this.visId.certificateType === 2"
                  label="联系方式："
                >
                  {{ dataForm.certificateInfo.borrowContactMobile }}
                </el-form-item>
              </el-col>
              <el-col
                v-if="
                  this.visId.certificateType === 1 ||
                  this.visId.certificateType === 3
                "
                :span="6"
              >
                <el-form-item label="考试总费用：">
                  {{ dataForm.certificateInfo.examFee }}(元)
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="通过中介：">
                  <!-- {{dataForm.certificateInfo.agencyFlag}} -->
                  <span v-if="dataForm.certificateInfo.agencyFlag === 1">
                    是
                  </span>
                  <span v-if="dataForm.certificateInfo.agencyFlag === 0">
                    否
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="中介名称：">
                  {{ dataForm.certificateInfo.agencyName }}
                </el-form-item>
              </el-col>
              <el-col
                v-if="dataForm.certificateInfo.onCompanyFlag == 0"
                :span="6"
              >
                <el-form-item label="离职时间：">
                  {{ dataForm.certificateInfo.companyEndTime }}
                </el-form-item>
              </el-col>
              <el-col v-if="this.visId.certificateType === 3" :span="6">
                <el-form-item label="非在职员工姓名：">
                  {{ dataForm.certificateInfo.friendshipName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="this.visId.certificateType === 2" :span="6">
                <el-form-item label="挂靠费用：">
                  {{ dataForm.certificateInfo.affiliationExpend }}(元)
                </el-form-item>
              </el-col>
              <el-col v-if="this.visId.certificateType === 2" :span="6">
                <el-form-item label="中介费用：">
                  {{ dataForm.certificateInfo.agencyFee }}(元)
                </el-form-item>
              </el-col>
              <el-col v-if="this.visId.certificateType === 2" :span="6">
                <el-form-item label="其他费用：">
                  {{ dataForm.certificateInfo.otherFee }}(元)
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  v-if="this.visId.certificateType === 2"
                  label="是否已支付："
                >
                  <!-- {{dataForm.certificateInfo.payFlag}} -->
                  <span v-if="dataForm.certificateInfo.payFlag === 1">
                    是
                  </span>
                  <span v-if="dataForm.certificateInfo.payFlag === 0">
                    否
                  </span>
                </el-form-item>
              </el-col>
              <el-col v-if="this.visId.certificateType === 2" :span="6">
                <el-form-item label="是否税后：">
                  <!-- {{dataForm.certificateInfo.tax}} -->
                  <span v-if="dataForm.certificateInfo.tax === 0"> 是 </span>
                  <span v-if="dataForm.certificateInfo.tax === 1"> 否 </span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  v-if="this.visId.certificateType === 2"
                  label="支付日期："
                >
                  {{ dataForm.certificateInfo.payTime }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="this.visId.certificateType === 3">
              <el-col :span="6">
                <el-form-item label="非在职员工关系：">
                  {{ dataForm.certificateInfo.borrowContactRelationship }}
                </el-form-item>
              </el-col>
              <el-col
                v-if="
                  this.visId.certificateType === 1 ||
                  this.visId.certificateType === 3
                "
                :span="6"
              >
                <el-form-item label="非在职员工联系方式：">
                  {{ dataForm.certificateInfo.friendshipMobile }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="费用说明：">
                  {{ dataForm.certificateInfo.feeRemark }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="情况说明：">
                  {{ dataForm.certificateInfo.remark }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="证书图片：">
                  <ele-image :urls="dataForm.certiPicList"></ele-image>
                  <!-- <ele-image :urls="dataForm.certifInfoList"></ele-image> -->
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  v-if="this.visId.certificateType === 2"
                  label="缴费凭证："
                >
                  <!-- {{dataForm.certificateInfo.remark}} -->
                  <ele-image :urls="dataForm.constratPicList"></ele-image>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="6">
           <el-form-item v-if="this.visId.certificateType === 2" label="合同图片：">
            <ele-image :urls="dataForm.constratPicList"></ele-image>
            </el-form-item>
         </el-col> -->
            </el-row>
          </el-form>
        </div>
        <!-- 流转记录 -->
        <div class="table-s">
          <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="流转记录" name="first">
              <el-table
                :data="tableData"
                :header-cell-style="{ background: '#F5F7FA' }"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  header-align="center"
                  align="center"
                  width="50"
                >
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="状态"
                  align="center"
                  min-width="70"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.type === 11">
                      <span
                        class="font_family icon-tuoyuan1"
                        style="color: #e9d56e"
                      ></span>
                      挂入
                    </span>
                    <span v-if="scope.row.type === 12">
                      <span
                        class="font_family icon-tuoyuan1"
                        style="color: #6ee976"
                      ></span>
                      归还
                    </span>
                    <span v-else-if="scope.row.type === 21">
                      <span
                        class="font_family icon-tuoyuan1"
                        style="color: #e96e6e"
                      ></span>
                      挂出
                    </span>
                    <span v-else-if="scope.row.type === 22">
                      <span
                        class="font_family icon-tuoyuan1"
                        style="color: #409eff"
                      ></span>
                      收回
                    </span>
                    <span v-else-if="scope.row.type === 3">
                      <span
                        class="font_family icon-tuoyuan1"
                        style="color: #6e92e9"
                      ></span>
                      借出
                    </span>
                    <span v-else-if="scope.row.type === 30">
                      <span
                        class="font_family icon-tuoyuan1"
                        style="color:color:#6EE976;"
                      ></span>
                      还回
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fromDeptName"
                  label="来源单位/部门"
                  align="center"
                  min-width="110"
                >
                </el-table-column>
                <el-table-column
                  prop="fromUserName"
                  label="来源人"
                  align="center"
                  min-width="70"
                >
                </el-table-column>
                <el-table-column
                  prop="toDeptName"
                  label="接收单位/部门"
                  align="center"
                  min-width="110"
                >
                </el-table-column>
                <el-table-column
                  prop="toUserName"
                  label="接收人"
                  align="center"
                  min-width="70"
                >
                </el-table-column>
                <el-table-column
                  prop="toUserMobile"
                  label="联系电话"
                  align="center"
                  min-width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="transactionTime"
                  label="流转日期"
                  align="center"
                  min-width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="transactionEndTime"
                  label="到期日期"
                  align="center"
                  min-width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="remark"
                  label="备注"
                  align="center"
                  min-width="160"
                >
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="60">
                  <template slot-scope="scope">
                    <!-- <el-button style="color:#6E92E9;" type="text" v-if="SubmitId == scope.row.id" size="mini" @click="addOrUpdateHandle(scope.row)">修改</el-button> -->
                    <el-button type="text" size="mini">—</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[5, 10, 20, 50, 100, 200]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, prev, pager, next, sizes, jumper"
              >
              </el-pagination>
            </el-tab-pane>
            <!-- 延期 -->
            <el-tab-pane label="延期记录" name="second">
              <el-table
                :data="secondData"
                :header-cell-style="{ background: '#F5F7FA' }"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  header-align="center"
                  align="center"
                  width="50"
                >
                </el-table-column>
                <el-table-column
                  prop="renewalTime"
                  label="延期操作日期"
                  align="center"
                  min-width="130"
                >
                </el-table-column>
                <el-table-column
                  prop="validityStartTime"
                  min-width="130"
                  align="center"
                  label="有效期开始日期"
                >
                </el-table-column>
                <el-table-column
                  prop="validityEndTime"
                  min-width="130"
                  align="center"
                  label="有效期结束日期"
                >
                </el-table-column>
                <el-table-column
                  prop="renewalFee"
                  min-width="130"
                  align="center"
                  label="延期费用"
                >
                </el-table-column>
                <el-table-column
                  min-width="170"
                  prop="remark"
                  align="center"
                  label="备注"
                >
                </el-table-column>
                <el-table-column min-width="130" align="center" label="操作">
                  <template slot-scope="scope">
                    <!-- <el-button style="color:#6E92E9;" type="text" v-if="secondMitId == scope.row.id" size="mini" @click="addOrUpdateSecond(scope.row)">修改</el-button> -->
                    <el-button type="text" size="mini">—</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[5, 10, 20, 50, 100, 200]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, prev, pager, next, sizes, jumper"
              >
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 证书借出 -->
        <el-dialog
          title="证书借出"
          width="70%"
          :visible.sync="transactionVisible"
        >
          <el-form
            :model="form"
            :rules="dataRule"
            ref="form"
            label-width="80px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="接收单位" prop="toDeptId">
                  <el-tree-select
                    style="width: 100%"
                    :data="treeData"
                    v-model="form.toDeptId"
                    node-key="id"
                    placeholder="请接收单位"
                    @change="keepDeptChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收人" prop="toUserId">
                  <el-select
                    v-model="form.toUserId"
                    @change="changeSelect"
                    placeholder="请选择接收人"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in employees"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="toUserMobile">
                  <el-input
                    v-model="form.toUserMobile"
                    minlength="11"
                    :readonly="this.readonly"
                    placeholder="请填写联系电话"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    maxlength="11"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借出时间" prop="transactionTime">
                  <el-date-picker
                    type="date"
                    v-model="form.transactionTime"
                    placeholder="选择借出时间"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="证书用途">
                  <el-select
                    v-model="form.usage"
                    placeholder="请选证书用途"
                    @change="changeUsage"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in usages"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="归还时间" prop="transactionTime">
                  <el-date-picker
                    type="date"
                    v-model="form.transactionEndTime"
                    placeholder="选择归还时间"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="form.remark"
                    placeholder="请填写情况说明"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              class="button-see"
              size="mini"
              plain
              @click="transactionVisible = false"
              >取 消</el-button
            >
            <el-button
              class="button-see"
              size="mini"
              type="primary"
              @click="transactionFormSubmit()"
              >借 出</el-button
            >
          </div>
        </el-dialog>
        <!-- 证书挂出 -->
        <el-dialog
          title="证书挂出"
          width="70%"
          class="dialogForm"
          :visible.sync="borrowFormVisible"
        >
          <el-form
            :model="borrowForm"
            :rules="borrowFormRule"
            ref="borrowForm"
            label-width="80px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="接收单位" prop="toDeptName">
                  <el-input
                    v-model="borrowForm.toDeptName"
                    placeholder="请填写接收单位"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收人" prop="toUserName">
                  <el-input
                    v-model="borrowForm.toUserName"
                    placeholder="请填写接收人"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="toUserMobile">
                  <el-input
                    v-model="borrowForm.toUserMobile"
                    placeholder="请填写联系电话"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    maxlength="11"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="挂出时间" prop="transactionTime">
                  <el-date-picker
                    type="date"
                    v-model="borrowForm.transactionTime"
                    placeholder="选择挂出时间"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="结束时间" prop="transactionTime">
                  <el-date-picker
                    type="date"
                    v-model="borrowForm.transactionEndTime"
                    placeholder="选择结束时间"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="挂靠价格">
                  <el-input
                    oninput="value=value.replace(/[^\d]/g,’’)"
                    placeholder="请填写挂靠价格"
                    v-model="borrowForm.affiliationIncome"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="中介费用">
                  <el-input
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    placeholder="请填写中介费用"
                    v-model="borrowForm.agencyFee"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="其他费用">
                  <el-input
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    placeholder="请填写其他费用"
                    v-model="borrowForm.otherFee"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否支付">
                  <el-select
                    v-model="borrowForm.payFlag"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in optionsPayment"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="打款时间">
                  <el-date-picker
                    type="date"
                    v-model="borrowForm.payTime"
                    placeholder="选择借出时间"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否税后">
                  <el-select
                    v-model="borrowForm.tax"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in optionsPayment"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item class="form-s" label="上传打款凭证">
                  <el-upload
                    class="upload-s"
                    ref="contractUpload"
                    accept=".jpg,.png"
                    :action="uploadUrl()"
                    :with-credentials="true"
                    :on-remove="onRemove"
                    :headers="myHeader"
                    :limit="limitNum"
                    :show-file-list="showList"
                    :on-success="onContractSuccess"
                    :on-error="onError"
                    list-type="picture-card"
                  >
                    <i class="el-icon-plus"></i>
                    <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png图片文件，且不超过800kb，其他无效</div> -->
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="费用说明">
                  <el-input
                    type="textarea"
                    :rows="4"
                    v-model="borrowForm.feeRemark"
                    placeholder="请填写中介、挂出等费用说明"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注">
                  <el-input
                    type="textarea"
                    :rows="4"
                    v-model="borrowForm.remark"
                    placeholder="请填写挂出的情况说明"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              class="button-see"
              size="mini"
              @click="borrowFormVisible = false"
              >取 消</el-button
            >
            <el-button
              class="button-see"
              size="mini"
              type="primary"
              plain
              @click="borrowFormSubmit()"
              >挂 出</el-button
            >
          </div>
        </el-dialog>
        <!-- 还回 -->
        <el-dialog
          v-dialogDrag
          title="证书还回"
          width="60%"
          :visible.sync="clickDoTransactionBack"
        >
          <el-form
            :model="backForm"
            ref="backDataForm"
            :rules="backRule"
            label-width="100px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注：" prop="remark">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="backForm.remark"
                    placeholder="请填写情况说明"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              class="button-see"
              size="mini"
              plain
              @click="clickDoTransactionBack = false"
              >取 消</el-button
            >
            <el-button
              class="button-see"
              size="mini"
              type="primary"
              @click="doTransactionBack()"
              >还 回</el-button
            >
          </div>
        </el-dialog>
        <!-- 收回 -->
        <el-dialog
          v-dialogDrag
          title="证书收回"
          width="60%"
          :visible.sync="dialogFormVisible"
        >
          <el-form
            :model="bringForm"
            ref="bringDataForm"
            :rules="bringRule"
            label-width="100px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="保管企业：" style="margin-bottom: 0px">
                  {{ dataForm.certificateInfo.keepDeptName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保管人：" style="margin-bottom: 0px">
                  {{ dataForm.certificateInfo.keepUserName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="shouhuishijian" :span="12">
                <el-form-item label="收回时间：" prop="transactionEndTimeisis">
                  <el-date-picker
                    type="date"
                    v-model="bringForm.transactionEndTimeisis"
                    placeholder="选择收回时间"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注：" prop="remark">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="bringForm.remark"
                    placeholder="请填写情况说明"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              class="button-see"
              size="mini"
              plain
              @click="dialogFormVisible = false"
              >取 消</el-button
            >
            <el-button
              class="button-see"
              size="mini"
              type="primary"
              @click="bringDataFormSubmit()"
              >收 回</el-button
            >
          </div>
        </el-dialog>
        <!-- 延期 -->
        <el-dialog title="延期证书" :visible.sync="dialogPostPones" width="50%">
          <span>
            <el-form
              :model="deeForm"
              ref="form"
              :rules="dataListRule"
              label-width="140px"
            >
              <el-row>
                <el-col :span="12" class="ell-form-item">
                  <el-form-item
                    label="新有效期开始时间:"
                    prop="validityStartTime"
                  >
                    <el-date-picker
                      type="date"
                      v-model="deeForm.validityStartTime"
                      placeholder="选择有效期开始时间"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="ell-form-item">
                  <el-form-item
                    label="新有效期结束时间:"
                    prop="validityEndTime"
                  >
                    <el-date-picker
                      type="date"
                      v-model="deeForm.validityEndTime"
                      placeholder="选择有效期结束时间"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="ell-form-item">
                  <el-form-item label="延期时间:" prop="renewalTime">
                    <el-date-picker
                      type="date"
                      v-model="deeForm.renewalTime"
                      placeholder="选择延期时间"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="ell-form-item">
                  <el-form-item label="延期费用:" prop="renewalFee">
                    <el-input
                      v-model="deeForm.renewalFee"
                      oninput="value=value.replace(/[^\d]/g,’’)"
                      placeholder="请填写延期费用"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注:" prop="remark">
                    <el-input
                      type="textarea"
                      :rows="5"
                      v-model="deeForm.remark"
                      placeholder="请填写延期相关的情况说明"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button
              size="mini"
              class="button-see"
              plain
              @click="dialogPostPones = false"
              >取 消</el-button
            >
            <el-button
              size="mini"
              class="button-see"
              type="primary"
              @click="clickPostPones()"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <!-- 挂入 -->
        <el-dialog
          title="证书挂入"
          width="70%"
          class="dialogForm"
          :visible.sync="clickRackVisible"
        >
          <el-form
            :model="rackForm"
            class="form-es"
            :rules="rackRule"
            ref="rackForm"
            label-width="80px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="来源单位" prop="fromDeptName">
                  <el-input
                    v-model="rackForm.fromDeptName"
                    placeholder="请填写来源企业名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="来源人" prop="fromUserName">
                  <el-input
                    v-model="rackForm.fromUserName"
                    :readonly="this.readonlyidid"
                    maxlength="11"
                    placeholder="请填写来源联系人"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  class="fenghzuang"
                  label="接收单位"
                  prop="toDeptId"
                >
                  <el-tree-select
                    style="width: 100%"
                    :data="treeData"
                    v-model="rackForm.toDeptId"
                    node-key="id"
                    placeholder="请接收单位"
                    @change="keepDeptChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收人" prop="toUserId">
                  <el-select
                    v-model="rackForm.toUserId"
                    @change="changeSelect"
                    placeholder="请选择接收人"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in employees"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="toUserMobile">
                  <el-input
                    v-model="rackForm.toUserMobile"
                    minlength="11"
                    :readonly="this.readonly"
                    placeholder="请填写联系电话"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    maxlength="11"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流转日期" prop="transactionTime">
                  <el-date-picker
                    type="date"
                    v-model="rackForm.transactionTime"
                    placeholder="选择流转时间"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="挂靠价格">
                  <el-input
                    oninput="value=value.replace(/[^\d]/g,’’)"
                    v-model="rackForm.affiliationExpend"
                    placeholder="请填写挂靠价格"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="到期日期" prop="transactionEndTime">
                  <el-date-picker
                    type="date"
                    v-model="rackForm.transactionEndTime"
                    placeholder="选择到期日期"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否中介">
                  <el-select
                    v-model="rackForm.agencyFlag"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in intermediary"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="rackForm.agencyFlag == 1" :span="12">
                <el-form-item label="中介名称">
                  <el-input
                    v-model="rackForm.agencyName"
                    placeholder="请填写中介名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="rackForm.agencyFlag == 1" :span="12">
                <el-form-item label="中介费用">
                  <el-input
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    v-model="rackForm.agencyFee"
                    placeholder="请填写中介费用"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="其他费用">
                  <el-input
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    v-model="rackForm.otherFee"
                    placeholder="请填写其他费用"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否支付">
                  <el-select
                    v-model="rackForm.payFlag"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in optionsPayment"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="rackForm.payFlag == 1" :span="12">
                <el-form-item label="支付日期" prop="transactionTime">
                  <el-date-picker
                    type="date"
                    v-model="rackForm.payTime"
                    placeholder="选择归还时间"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否税后">
                  <el-select
                    v-model="rackForm.tax"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in optionsAT"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="费用说明">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="rackForm.feeRemark"
                    placeholder="请填写中介费、等费用说明"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="情况说明">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="rackForm.remark"
                    placeholder="请填写情况说明"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              class="button-see"
              size="mini"
              plain
              @click="clickRackVisible = false"
              >取 消</el-button
            >
            <el-button
              class="button-see"
              size="mini"
              type="primary"
              plain
              @click="rackFormSubmit()"
              >确 认</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- <div v-for="tableData"></div> -->
    <certificate-manual
      :editmodification="editmodification"
      @getAddUser="getAddUser"
      @isDateEdit="isDateEdit"
      :img="img"
      :dataListForm="dataForm.certificateInfo"
      v-else
    ></certificate-manual>
  </div>
</template>
<script>
import Vue from "vue";
import CertificateManual from "./certificate-manual";
import EleImage from "./ele-image.vue";
import ElTreeSelect from "@/components/treeSelect/index.vue";
import merge from "lodash/merge";
import { Button } from "element-ui";
export default {
  name: "CertificateDetail",
  data() {
    return {
      isDataEdit: false,
      readonlyidid: false,
      dialogPostPones: false,
      clickRackVisible: false,
      backForm: {
        remark: "",
      },
      deeForm: {
        renewalTime: "",
        validityStartTime: "",
        validityEndTime: "",
        remark: "",
        renewalFee: "",
      },
      editableTabs: [],
      dataForm: {
        certificateInfo: {},
        // name:''
        // certificateType:1
      },
      form: {
        toDeptId: "",
        toUserId: "",
        toUserMobile: "",
        transactionTime: "",
        usage: "",
        remark: "",
        transactionEndTime: "",
      },
      // 挂入数据
      rackForm: {
        fromDeptName: "",
        fromUserName: "",
        toDeptId: "",
        toUserId: "",
        toUserMobile: "",
        transactionTime: "",
        affiliationExpend: "",
        transactionEndTime: "",
        agencyFlag: 0,
        agencyName: "",
        agencyFee: "",
        otherFee: "",
        payFlag: 1,
        payTime: "",
        tax: 1,
        feeRemark: "",
        remark: "",
      },
      rackRule: {
        fromDeptName: [
          { required: true, message: "请填写来源单位", trigger: "blur" },
        ],
        fromUserName: [
          { required: true, message: "请填写来源人", trigger: "blur" },
        ],
        toDeptId: [
          { required: true, message: "请选择接收单位", trigger: "blur" },
        ],
        toUserId: [
          { required: true, message: "请选择接收人", trigger: "blur" },
        ],
        toUserMobile: [
          { required: true, message: "请填写联系电话", trigger: "blur" },
        ],
        transactionTime: [
          { required: true, message: "请选择流转日期", trigger: "blur" },
        ],
        transactionEndTime: [
          { required: true, message: "请选择到期日期", trigger: "blur" },
        ],
      },
      optionsAT: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      optionsPayment: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      intermediary: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      optionsPayment: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      borrowForm: {
        tax: 1,
        otherFee: "",
        payTime: "",
        payFlag: 1,
        toUserMobile: "",
        agencyFee: "",
        affiliationIncome: "",
        transactionEndTime: "",
        toDeptName: "",
        toUserName: "",
        toUserMobile: "",
        transactionTime: "",
        remark: "",
        feeRemark: "",
      },
      bringForm: {
        transactionEndTimeisis: "",
        remark: "",
      },
      bringRule: {
        transactionEndTimeisis: [
          { required: true, message: "请选择收回时间", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请填写情况说明", trigger: "blur" },
        ],
      },
      backRule: {
        remark: [
          { required: true, message: "请填写情况说明", trigger: "blur" },
        ],
      },
      dataRule: {
        toDeptId: [
          { required: true, message: "请选择接收单位", trigger: "blur" },
        ],
        toUserId: [
          { required: true, message: "请选择接收人", trigger: "blur" },
        ],
        toUserMobile: [
          { required: true, message: "请填写联系电话", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请填写情况说明", trigger: "blur" },
        ],
        transactionTime: [
          { required: true, message: "请选择借出时间", trigger: "blur" },
        ],
      },
      dataListRule: {
        renewalTime: [
          { required: true, message: "选择延期时间", trigger: "blur" },
        ],
        validityStartTime: [
          { required: true, message: "选择有效期开始时间", trigger: "blur" },
        ],
        validityEndTime: [
          { required: true, message: "选择有效期结束时间", trigger: "blur" },
        ],
        renewalFee: [
          { required: true, message: "请填写延期费用", trigger: "blur" },
        ],
      },
      borrowFormRule: {
        toDeptName: [
          { required: true, message: "请填写接收单位", trigger: "blur" },
        ],
        toUserName: [
          { required: true, message: "请填写接收人", trigger: "blur" },
        ],
        toUserMobile: [
          { required: true, message: "请填写联系电话", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请填写情况说明", trigger: "blur" },
        ],
        transactionTime: [
          { required: true, message: "请选择挂出时间", trigger: "blur" },
        ],
      },
      usages: [
        { value: 21, name: "投标" },
        { value: 23, name: "中标" },
        { value: 22, name: "项目" },
        { value: 24, name: "其他" },
      ],
      employees: [],
      editmodification: true,
      dialogFormVisible: false,
      clickDoTransactionBack: false,
      transactionVisible: false,
      borrowFormVisible: false,
      labelPosition: "right",
      activeName: "first",
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      readonly: false,
      jiechu: false,
      huanhui: false,
      guachu: false,
      shouhui: false,
      yanqi: false,
      guaru: false,
      guaruId: "",
      yanqiId: "",
      jiechuId: "",
      huanhuiId: "",
      guachuId: "",
      shouhuiId: "",
      tableData: [],
      treeData: [],
      secondData: [],
      img: [],
      name: "",
      SubmitId: "",
      secondMitId: "",
      limitNum: 1,
      showList: true,
    };
  },
  props: {
    visId: {
      type: Object,
      required: true,
    },
    isEdited: {
      type: Boolean,
    },
    flag: {
      type: Boolean,
      default: false,
    },
    types: {
      type: Number,
    },
  },
  created() {
    this.initOrgTree();
    this.initJobs();
    this.initRecord();
    this.initOrgTree();
    this.renewalInfo();
    this.keepDeptChange();
    this.changeUsage();
  },
  computed: {
    getOpSign() {
      if (this.visId.certificateType === 1) {
        return "在职员工证书";
      } else if (this.visId.certificateType === 2) {
        return "挂靠证书";
      } else {
        return "非在职员工证书";
      }
      // this.dataForm.certificateType === 2? "兼职证书":"在职员工证书"
    },
    myHeader() {
      return {
        token: Vue.cookie.get("token"),
      };
    },
  },
  components: {
    ElTreeSelect,
    EleImage,
    CertificateManual,
  },
  methods: {
    // 修改流转
    addOrUpdateHandle(row) {
      console.log(row);
      // 还回
      if (row.type == 30) {
        this.huanhui = true;
        this.huanhuiId = row.id;
        this.clickDoTransactionBack = true;
        this.backForm.remark = row.remark;
      }
      // 借出
      if (row.type == 3) {
        this.transactionVisible = true;
        this.jiechu = true;
        this.jiechuId = row.id;
        this.form = { ...this.form, ...row };
      }
      // 挂出
      if (row.type == 21) {
        this.borrowFormVisible = true;
        this.guachu = true;
        this.guachuId = row.id;
        this.borrowForm = { ...this.borrowForm, ...row };
      }
      // 收回
      if (row.type == 22) {
        this.dialogFormVisible = true;
        this.shouhui = true;
        this.shouhuiId = row.id;
        this.bringForm = { ...this.bringForm, ...row };
      }
      if (row.type == 11) {
        this.clickRackVisible = true;
        this.guaru = true;
        this.guaruId = row.id;
        this.rackForm = { ...this.rackForm, ...row };
      }
    },
    changeSelect(value) {
      this.$http({
        url: this.$http.adornUrl("/certificate/employeeInfo/info/" + value),
        method: "get",
      }).then(({ data }) => {
        // this.dataListName = data.e
        this.rackForm.toUserMobile = data.e.mobile;
        this.form.toUserMobile = data.e.mobile;
        this.readonly = true;
      });
    },
    addOrUpdateSecond(row) {
      this.dialogPostPones = true;
      this.deeForm = row;
      this.yanqi = true;
      this.yanqiId = row.id;
    },
    clickPostPones() {
      if (this.yanqi == false) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certificateRenewalInfo/save"
              ),
              method: "post",
              data: this.$http.adornData({
                certificateId: this.dataForm.certificateInfo.id,
                tenantId: this.dataForm.certificateInfo.tenantId,
                renewalTime: this.$dateFormat(this.deeForm.renewalTime),
                validityStartTime: this.$dateFormat(
                  this.deeForm.validityStartTime
                ),
                validityEndTime: this.$dateFormat(this.deeForm.validityEndTime),
                remark: this.deeForm.remark,
                renewalFee: this.deeForm.renewalFee,
                // 'contractPic': contractPics.join(",")
              }),
            }).then(({ data }) => {
              // console.log(data);
              if (data.code === 0) {
                this.$message.success("延期成功");
                this.dialogPostPones = false;
                this.initJobs();
                this.renewalInfo();
              } else {
                this.$message.error("延期失败");
              }
            });
          }
        });
      } else {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certificateRenewalInfo/update"
              ),
              method: "post",
              data: this.$http.adornData({
                certificateId: this.dataForm.certificateInfo.id,
                id: this.yanqiId,
                renewalTime: this.$dateFormat(this.deeForm.renewalTime),
                validityStartTime: this.$dateFormat(
                  this.deeForm.validityStartTime
                ),
                validityEndTime: this.$dateFormat(this.deeForm.validityEndTime),
                remark: this.deeForm.remark,
                renewalFee: this.deeForm.renewalFee,
                // 'contractPic': contractPics.join(",")
              }),
            }).then(({ data }) => {
              // console.log(data);
              if (data.code === 0) {
                this.$message.success("操作成功");
                this.dialogPostPones = false;
                this.initJobs();
                this.renewalInfo();
              } else {
                this.$message.error("操作失败");
              }
            });
          }
        });
      }
    },
    itemDetails() {
      this.dialogPostPones = true;
    },
    toggleEdit() {
      this.isDataEdit = true;
    },
    gotoRouteHandle() {
      if (this.isEdited) {
        // this.$router.go(-1)
        this.$parent.clickCertificateCrach();
        //  this.$parent.handleClick();
        //  this.$parent.clickPackUp()
      } else {
        this.$parent.routerBack();
        this.$parent.handleClick();
        //  this.$parent.clickPackUp()
      }
      this.$emit("rountHandle", false);
    },
    handleClick(tab, event) {
      // if(this.SubmitId == this.tableData)
      this.name = tab.name;
      if (this.name === "first") {
        this.initRecord();
      } else {
        this.renewalInfo();
      }
    },
    getAddUser() {
      this.initOrgTree();
      this.initJobs();
      this.initRecord();
      this.initOrgTree();
      this.renewalInfo();
    },
    initOrgTree() {
      this.$http({
        url: this.$http.adornUrl("/tenant/tenantDeptInfo/tree"),
        method: "get",
        params: {},
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.treeData = [data.deptInfo];
        } else {
          this.treeData = [];
        }
      });
    },
    isDateEdit() {
      console.log(111);
      this.isDataEdit = false;
    },
    clickTransactionVisible() {
      // console.log(1);
      this.transactionVisible = true;
    },
    initJobs() {
      if (this.types == null) {
        this.$http({
          url: this.$http.adornUrl(
            "/certificate/certificateInfo/info/" + this.visId.id
          ),
          method: "get",
        }).then(({ data }) => {
          if (data.code === 0) {
            this.dataForm = data;
            console.log(this.dataForm);
            this.rackForm.borrowContact = this.dataForm.certificateInfo.name;
            this.readonlyidid = true;
            data.certiPicList.forEach((val) => {
              this.img.push({
                // name: val.response.data.fileName,
                url: data.certiPicList[0].path,
              });
            });
            // this.img = data.certiPicList[0].path
            // this.img.name = data.certiPicList[0].fileName
            // this.img.url = data.certiPicList[0].path
            // this.image = data.constratPicList[0]
            // console.log(data.image);
          }
          //  setTimeout(() => {
          //     this.activeName = data[0].randomNum
          // });
        });
      } else {
        console.log(123);
        console.log(this.visId);
        this.$http({
          url: this.$http.adornUrl(
            "/certificate/certificateInfo/info/" + this.visId.certificateId
          ),
          method: "get",
        }).then(({ data }) => {
          if (data.code === 0) {
            this.dataForm = data;
            console.log(this.dataForm.certificateInfo);
            data.payPicList.forEach((val) => {
              this.img.push({
                url: data.payPicList[0].path,
              });
            });
            // this.img = data.certiPicList[0].path
            // this.img.name = data.certiPicList[0].fileName
            // this.img.url = data.certiPicList[0].path
            // this.image = data.constratPicList[0]
            // console.log(data.image);
          }
          //  setTimeout(() => {
          //     this.activeName = data[0].randomNum
          // });
        });
      }
    },
    // 流转记录
    initRecord() {
      if (this.types == null) {
        this.$http({
          url: this.$http.adornUrl(
            "/certificate/certiTransactionInfo/getAllList"
          ),
          method: "get",
          params: this.$http.adornParams({
            certificateId: this.visId.id,
            page: this.pageIndex,
            limit: this.pageSize,
            // 'status': this.flag? 'crash':''
          }),
        }).then(({ data }) => {
          if (data.code === 0) {
            this.tableData = data.data;
            this.SubmitId = data.data[0].id;
            this.totalPage = data.count;
            console.log(this.tableData);
          }
        });
      } else {
        this.$http({
          url: this.$http.adornUrl(
            "/certificate/certiTransactionInfo/getAllList"
          ),
          method: "get",
          params: this.$http.adornParams({
            certificateId: this.visId.certificateId,
            page: this.pageIndex,
            limit: this.pageSize,
            // 'status': this.flag? 'crash':''
          }),
        }).then(({ data }) => {
          if (data.code === 0) {
            this.tableData = data.data;
            // this.SubmitId = data.page.list[0].id
            this.totalPage = data.count;
            console.log(this.tableData);
          }
        });
      }
    },
    renewalInfo() {
      if (this.types == null) {
        this.$http({
          url: this.$http.adornUrl("/certificate/certificateRenewalInfo/list/"),
          method: "get",
          params: this.$http.adornParams({
            certificateId: this.visId.id,
            page: this.pageIndex,
            limit: this.pageSize,
            // 'status': this.flag? 'crash':''
          }),
        }).then(({ data }) => {
          if (data.code === 0) {
            this.secondData = data.page.list;
            this.secondMitId = data.page.list[0].id;
            this.totalPage = data.page.totalPage;
          }
          //  setTimeout(() => {
          //     this.activeName = data[0].randomNum
          // });
        });
      } else {
        this.$http({
          url: this.$http.adornUrl("/certificate/certificateRenewalInfo/list/"),
          method: "get",
          params: this.$http.adornParams({
            certificateId: this.visId.certificateId,
            page: this.pageIndex,
            limit: this.pageSize,
            // 'status': this.flag? 'crash':''
          }),
        }).then(({ data }) => {
          if (data.code === 0) {
            this.secondData = data.page.list;
            this.secondMitId = data.page.list[0].id;
            this.totalPage = data.page.totalPage;
            // console.log(data);
          }
          //  setTimeout(() => {
          //     this.activeName = data[0].randomNum
          // });
        });
      }
    },
    // 挂入
    rackFormSubmit() {
      if (this.guaru == false) {
        this.$refs["rackForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/save"
              ),
              method: "post",
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                certificateId: this.visId.id,
                borrowOrgName: this.rackForm.borrowOrgName,
                borrowContact: this.rackForm.borrowContact,
                toDeptId: this.rackForm.toDeptId,
                toUserId: this.rackForm.toUserId,
                mobile: this.rackForm.mobile,
                type: 11,
                transactionTime: this.rackForm.transactionTime,
                affiliationExpend: this.rackForm.affiliationExpend,
                transactionEndTime: this.rackForm.transactionEndTime,
                agencyFlag: this.rackForm.agencyFlag,
                agencyName: this.rackForm.agencyName,
                agencyFee: this.rackForm.agencyFee,
                otherFee: this.rackForm.otherFee,
                payFlag: this.rackForm.payFlag,
                payTime: this.rackForm.payTime,
                tax: this.rackForm.tax,
                feeRemark: this.rackForm.feeRemark,
                remark: this.rackForm.remark,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.initRecord();
                    this.initJobs();
                    this.clickRackVisible = false;
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      } else {
        this.$refs["rackForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/update"
              ),
              method: "post",
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                certificateId: this.visId.id,
                id: this.guaruId,
                borrowOrgName: this.rackForm.borrowOrgName,
                borrowContact: this.rackForm.borrowContact,
                toDeptId: this.rackForm.toDeptId,
                toUserId: this.rackForm.toUserId,
                mobile: this.rackForm.mobile,
                type: 11,
                transactionTime: this.rackForm.transactionTime,
                affiliationExpend: this.rackForm.affiliationExpend,
                transactionEndTime: this.rackForm.transactionEndTime,
                agencyFlag: this.rackForm.agencyFlag,
                agencyName: this.rackForm.agencyName,
                agencyFee: this.rackForm.agencyFee,
                otherFee: this.rackForm.otherFee,
                payFlag: this.rackForm.payFlag,
                payTime: this.rackForm.payTime,
                tax: this.rackForm.tax,
                feeRemark: this.rackForm.feeRemark,
                remark: this.rackForm.remark,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.initRecord();
                    this.initJobs();
                    this.clickRackVisible = false;
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      }
    },
    // 借出
    transactionFormSubmit() {
      if (this.jiechu == false) {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/save"
              ),
              method: "post",
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                certificateId: this.visId.id,
                type: 3,
                toDeptId: this.form.toDeptId,
                toUserId: this.form.toUserId,
                toUserMobile: this.form.toUserMobile,
                transactionTime: this.$dateFormat(this.form.transactionTime),
                usage: this.form.usage,
                remark: this.form.remark,
                transactionEndTime: this.form.transactionEndTime,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataForm.certificateInfo.status = data.c.status;
                // this.dataForm.certiTransactionInfoList = data.ctList
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.initRecord();
                    this.initJobs();
                    this.transactionVisible = false;
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      } else {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/update"
              ),
              method: "post",
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                id: this.jiechuId,
                type: 3,
                toDeptId: this.form.toDeptId,
                toUserId: this.form.toUserId,
                toUserMobile: this.form.toUserMobile,
                transactionTime: this.$dateFormat(this.form.transactionTime),
                usage: this.form.usage,
                remark: this.form.remark,
                transactionEndTime: this.form.transactionEndTime,
              }),
            }).then(({ data }) => {
              if (data.code === 0) {
                console.log(26987);
                this.dataForm.certificateInfo.status = data.c.status;
                // this.dataForm.certiTransactionInfoList = data.ctList
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.initRecord();
                    this.initJobs();
                    this.transactionVisible = false;
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      }
    },
    // 挂出
    borrowFormSubmit() {
      if (this.guachu == false) {
        this.$refs["borrowForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/save"
              ),
              method: "post",
              data: this.$http.adornData({
                certificateId: this.visId.id || undefined,
                type: 21,
                toDeptName: this.borrowForm.toDeptName,
                toUserName: this.borrowForm.toUserName,
                toUserMobile: this.borrowForm.toUserMobile,
                transactionTime: this.$dateFormat(
                  this.borrowForm.transactionTime
                ),
                remark: this.borrowForm.remark,
                payTime: this.borrowForm.payTime,
                payFlag: this.borrowForm.payFlag,
                agencyFee: this.borrowForm.agencyFee,
                transactionEndTime: this.borrowForm.transactionEndTime,
                affiliationIncome: this.borrowForm.affiliationIncome,
                otherFee: this.borrowForm.otherFee,
                tax: this.borrowForm.tax,
                feeRemark: this.borrowForm.feeRemark,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataForm.status = data.c.status;
                this.dataForm.certiTransactionInfoList = data.ctList;
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.initRecord();
                    this.initJobs();
                    this.borrowFormVisible = false;
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      } else {
        this.$refs["borrowForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/update"
              ),
              method: "post",
              data: this.$http.adornData({
                // 'certificateId': this.visId.id || undefined,
                id: this.guachuId,
                type: 21,
                toDeptName: this.borrowForm.toDeptName,
                toUserName: this.borrowForm.toUserName,
                toUserMobile: this.borrowForm.toUserMobile,
                transactionTime: this.$dateFormat(
                  this.borrowForm.transactionTime
                ),
                remark: this.borrowForm.remark,
                payTime: this.borrowForm.payTime,
                payFlag: this.borrowForm.payFlag,
                agencyFee: this.borrowForm.agencyFee,
                transactionEndTime: this.borrowForm.transactionEndTime,
                affiliationIncome: this.borrowForm.affiliationIncome,
                otherFee: this.borrowForm.otherFee,
                tax: this.borrowForm.tax,
                feeRemark: this.borrowForm.feeRemark,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataForm.status = data.c.status;
                this.dataForm.certiTransactionInfoList = data.ctList;
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.initRecord();
                    this.initJobs();
                    this.borrowFormVisible = false;
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      }
    },
    //  收回
    bringDataFormSubmit() {
      if (this.shouhui == false) {
        this.$refs["bringDataForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/update"
              ),
              method: "post",
              data: this.$http.adornData({
                id: this.tableData[0].id,
                type: 22,
                transactionEndTime: this.$dateFormat(
                  this.bringForm.transactionEndTimeisis
                ),
                remark: this.bringForm.remark,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.initRecord();
                    this.initJobs();
                    this.dialogFormVisible = false;
                    //  this.init(this.ct.id)
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      } else {
        this.$refs["bringDataForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/update"
              ),
              method: "post",
              data: this.$http.adornData({
                id: this.shouhuiId,
                type: 22,
                transactionEndTime: this.$dateFormat(
                  this.bringForm.transactionEndTimeisis
                ),
                remark: this.bringForm.remark,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.initRecord();
                    this.initJobs();
                    this.dialogFormVisible = false;
                    //  this.init(this.ct.id)
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      }
    },
    changeUsage(value) {
      this.form.usage = value;
    },
    //  归还
    clickDoTransactionBackB() {
      this.clickDoTransactionBack = true;
    },
    doTransactionBack() {
      // this.$confirm(`该操作，会将证书回归到录入部门保管员下，状态同时置为<span style='color:#fc8e2d;'>空闲</span>`, '证书归还', {
      //   confirmButtonText: '是',
      //   cancelButtonText: '否',
      //   confirmButtonClass: 'el-button--warning',
      //   dangerouslyUseHTMLString: true,
      //   showClose: false,
      //   center: true
      //   }).then(() => {
      //   })
      if (this.huanhui == false) {
        this.$refs["backDataForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/update"
              ),
              method: "post",
              data: this.$http.adornData({
                id: this.tableData[0].id,
                type: 30,
                remark: this.backForm.remark,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.clickDoTransactionBack = false;
                    this.initRecord();
                    this.initJobs();
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      } else {
        this.$refs["backDataForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                "/certificate/certiTransactionInfo/update"
              ),
              method: "post",
              data: this.$http.adornData({
                id: this.huanhuiId,
                type: 30,
                remark: this.backForm.remark,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.clickDoTransactionBack = false;
                    this.initRecord();
                    this.initJobs();
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      }
    },
    uploadUrl() {
      return this.$http.adornUrl(`/certificate/certificateInfo/upload`);
    },
    onRemove(file, fileList) {
      console.log(this.file);
      console.log(this.fileList);
    },
    onContractSuccess(response, file, fileList) {
      this.constractPicList = fileList;
    },
    onError(err, file, fileList) {
      this.$message.error("上传失败");
    },
    keepDeptChange(id, item) {
      // this.employees = []
      // this.dataForm.keepUserId = ''
      this.$http({
        url: this.$http.adornUrl("/certificate/employeeInfo/getEmployeeInfos"),
        method: "get",
        params: this.$http.adornParams({
          deptId: id,
        }),
      }).then(({ data }) => {
        if (data && data.length > 0) {
          this.employees = data;
          this.readonly = true;
        }
      });
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      if (this.name === "first") {
        this.initRecord();
      } else {
        this.renewalInfo();
      }
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      if (this.name === "first") {
        this.initRecord();
      } else {
        this.renewalInfo();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mod-detail {
  padding: 15px !important;
  background-color: #f5f7fa;
}
.mod-isisis {
  padding-right: 15px !important;
  padding-left: 15px !important;
  background-color: #ffffff;
}
.in-t {
  height: 56px;
  float: left;
  display: flex;
  align-items: center;
}
.in-ts {
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6e92e9;
}
/deep/.tabs-s .el-tabs__active-bar {
  height: 2px !important;
}
/deep/.form-es {
  .fenghzuang {
    margin-bottom: 18px !important;
  }
}

/deep/.tabs-s {
  .el-tabs__header {
    .el-tabs__nav-wrap {
      .el-tabs__nav-scroll {
        .el-tabs__nav {
          .el-tabs__item {
            border: none !important;
            background-color: #ffffff !important;
            // padding-left: 0px !important;
          }
        }
      }
    }
  }
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  .el-dialog__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 20px !important;
  }
}
.font_family {
  font-size: 15px !important;
}
.shouhuishijian {
  margin-top: 8px;
}
.queryFormList {
  .el-form-item {
    margin-bottom: 0px !important;
  }
}
.button-see {
  font-size: 14px;
}
.div-button {
  width: 100%;
  height: 35px;
  // margin-bottom: 30px;
  // float: right;
  .button-jie {
    float: right;
    margin-left: 10px;
    margin-right: 10px;
  }
  .button-shou {
    float: right;
    margin-right: 10px;
  }

  .button-gui {
    float: right;
    margin-right: 10px;
  }
  .button-gua {
    float: right;
  }
  .button-yanqi {
    float: right;
    margin-right: 10px;
  }
  .button-guaru {
    float: right;
    // margin-right: 10px;
  }
}
.hander-s {
  width: 100%;
  height: 56px;
  color: #303133;
  overflow: hidden;
  h3 {
    float: left;
    font-size: 16px;
    margin: 0px !important;
    padding: 0px !important;
  }
  padding-left: 10px;
  font-size: 14px;
  font-weight: 400;
  i {
    color: #f2f6fc;
    margin-left: 5px;
    margin-right: 5px;
  }
  .anniu {
    height: 56px;
    float: right;
    display: flex;
    align-items: center;
  }
}
// .queryForm{
//   text-align: center;
// }
.form-div {
  margin-left: 10px;
}
/deep/.mod-detail {
  .dialogForm {
    .el-dialog {
      margin-top: 5vh !important;
    }
  }
}
/deep/.dialogForm {
  .el-form-item__label {
    width: 90px !important;
  }
  .form-s {
    .el-form-item__label {
      width: 110px !important;
    }
  }
  .upload-s {
    margin-left: 20px;
  }
  .el-form-item__content {
    margin-left: 90px !important;
  }
}
.table-s {
  margin-top: 10px;
  padding-left: 10px;
  width: 100%;
}
.tab-pane {
  float: left;
}
.anniu-s {
  float: right;
  margin-right: 15px;
}
</style>

